/** @type {import('tailwindcss/tailwind-config').TailwindConfig} */
import colors from './tailwind.colors'
import plugin from 'tailwindcss/plugin'
module.exports = {
  content: [
    './index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}',
  ],
  darkMode: 'media', // or 'media' or 'class'
  theme: {
    textColor: {
      primary: colors.neutral[9],
      secondary: colors.neutral[8],
      tertiary: colors.neutral[7],
      remind: colors.neutral[6],
      disable: colors.neutral[5],
      inverse: '#ffffff',
      link: colors.blue[6],
      brand: colors.blue[6],
      success: colors.green[6],
      warning: colors.orange[6],
      error: colors.red[6],
    },
    backgroundColor: {
      default: colors.neutral[1],
      inverse: '#ffffff',
      brand: colors.blue[6],
      'brand.light': colors.blue[1],
      info: colors.blue[6],
      'info.light': colors.blue[1],
      success: colors.green[6],
      'success.light': colors.green[1],
      warning: colors.orange[6],
      'warning.light': colors.orange[1],
      error: colors.red[6],
      'error.light': colors.red[1],
      ...colors,
    },
    borderColor: {
      default: colors.neutral[4],
      brand: colors.blue[6],
      info: colors.blue[6],
      success: colors.green[6],
      warning: colors.orange[6],
      error: colors.red[6],
      divider: colors.neutral[3],
      ...colors,
    },
    // 简写-text
    fontSize: {
      xs: ['20rpx', '28rpx'],
      sm: ['24rpx', '36rpx'],
      md: ['28rpx', '40rpx'],
      lg: ['32rpx', '44rpx'],
      xl: ['36rpx', '52rpx'],
      '2xl': ['40rpx', '56rpx'],
      '3xl': ['48rpx', '68rpx'],
    },
    // 简写-font
    fontWeight: {
      regular: '400',
      medium: '500',
      semibold: '600',
      bold: '700',
    },
    // 作用于padding、 margin、 width、 height、 maxHeight、 gap、 inset、 space 和 translate
    spacing: {
      0: '0',
      sm: '8rpx',
      md: '16rpx',
      lg: '24rpx',
      xl: '32rpx',
      '2xl': '48rpx',
      '3xl': '64rpx',
    },
    // 简写-rounded
    borderRadius: {
      sm: '8rpx',
      md: '12rpx',
      lg: '24rpx',
      xl: '48rpx',
      full: '9999rpx',
    },
    // 简写-shadow
    boxShadow: {
      DEFAULT: '0 4rpx 16rpx rgba(0, 0, 0, 0.02)',
      sm: '0 6rpx 16rpx rgba(0, 0, 0, 0.08)',
      md: '0 10rpx 28rpx rgba(0, 0, 0, 0.09)',
      lg: '0 16rpx 40rpx rgba(0, 0, 0, 0.1)',
    },
    extend: {
      borderWidth: {
        thin: '1rpx',
      },
    },
  },
  plugins: [
    plugin(function ({ addComponents, theme, addUtilities }) {
      addComponents({
        '.textH1': {
          fontSize: theme('fontSize.2xl'),
          lineHeight: theme('fontSize.2xl[1]'),
          fontWeight: theme('fontWeight.medium'),
        },
        '.textH2': {
          fontSize: theme('fontSize.xl'),
          lineHeight: theme('fontSize.xl[1]'),
          fontWeight: theme('fontWeight.medium'),
        },
        '.textH3': {
          fontSize: theme('fontSize.lg'),
          lineHeight: theme('fontSize.lg[1]'),
          fontWeight: theme('fontWeight.medium'),
        },
        '.textH4': {
          fontSize: theme('fontSize.md'),
          lineHeight: theme('fontSize.md[1]'),
          fontWeight: theme('fontWeight.medium'),
        },
        '.textBody1': {
          fontSize: theme('fontSize.lg'),
          lineHeight: theme('fontSize.lg[1]'),
          fontWeight: theme('fontWeight.regular'),
        },
        '.textBody2': {
          fontSize: theme('fontSize.md'),
          lineHeight: theme('fontSize.md[1]'),
          fontWeight: theme('fontWeight.regular'),
        },
        '.textBody3': {
          fontSize: theme('fontSize.sm'),
          lineHeight: theme('fontSize.sm[1]'),
          fontWeight: theme('fontWeight.regular'),
        },
        '.textCaption': {
          fontSize: theme('fontSize.xs'),
          lineHeight: theme('fontSize.xs[1]'),
          fontWeight: theme('fontWeight.regular'),
        },
      })
      addUtilities({
        '.safe-top': {
          paddingTop: ['constant(safe-area-inset-top)', 'env(safe-area-inset-top)'],
        },
        '.safe-left': {
          paddingLeft: ['constant(safe-area-inset-left)', 'env(safe-area-inset-left)'],
        },
        '.safe-right': {
          paddingRight: ['constant(safe-area-inset-right)', 'env(safe-area-inset-right)'],
        },
        '.safe-bottom': {
          paddingBottom: ['constant(safe-area-inset-bottom)', 'env(safe-area-inset-bottom)'],
        },
      })
    }),
  ],
  corePlugins: {
    preflight: false, // 默认样式
  },
}
